import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtNavBar, AtDrawer, AtAvatar,AtDivider,AtIcon } from "taro-ui";
import {connect} from '@tarojs/redux'

import './planNavBar.less'

@connect(
    state=>state.user
)
class PlanNavBar extends Component {
  constructor() {
    this.state = {
      showDrawer: false
    };
  }
  render() {
    return (
      <View>
        <AtNavBar
          title='Planet计划'
          fixed
          leftIconType='user'
          onClickLeftIcon={() => {
            this.setState({
              showDrawer: true
            });
          }}
        />
        <AtDrawer
          show={this.state.showDrawer}
          mask
          onClose={() => {
            this.setState({
              showDrawer: false
            });
          }}
        >
          <View>
            <AtAvatar
              image={this.props.userInfo.avatarUrl}
              size='large'
              circle
            />
            <AtDivider>{this.props.userInfo.nickName}</AtDivider>
            {
              this.props.specialWords.length===0
                ?null
                :(
                  <View className='drawer-word'>
                    {this.props.specialWords[1]}
                    <AtIcon value='heart-2' size='30' color='#DB3E3E'></AtIcon>
                  </View>
                )
            }
          </View>
        </AtDrawer>
      </View>
    );
  }
}

export default PlanNavBar;
